<!DOCTYPE HTML>
<html>
	<head>
		<meta charset='utf-8' />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<title>横排列表-左右对齐</title>
		<style>
		/* 避免显示bug */
		* {
			margin: 0;
			padding: 0;
		}
		.overdiv {
			/*设置的刚好是列表加间隙的宽度*/
			width:490px;
			height:700px;
			background-color:#f3f3f3;
			/*over-flow*/
			overflow: hidden;
		}

		ul {
			/*大于3个小于4个*/
			width: 650px;
			list-style: none;
		}

		li {
			display: block;
			background-color: #e4f5f8;
			width:150px;
			height:200px;
			/*浮动左边，消除左边间隙，margin右边*/
			float:left;
			margin-right: 20px;
			margin-bottom:20px;
			text-align: center;
			/*文字垂直居中，反正就一行字*/
			line-height: 200px;
		}
		</style>
	</head>
	<body>
		<!-- 中文注释 -->
		<div class="overdiv">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				<li>5</li>
				<li>6</li>
				<li>7</li>
				<li>8</li>
				<li>9</li>
			</ul>
		</div>
	</body>
</html>